<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>选择校区</title>
	<style type="text/css">
		body {
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
		}

		.container {
			max-width: 500px;
			margin: 100px auto;
			text-align: center;
			padding: 30px;
			background: white;
			border-radius: 15px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			@media (max-width: 768px) {
				padding: 20px 15px;
				margin: 50px auto;
			}
		}

		.title {
			font-size: 24px;
			margin-bottom: 30px;
			color: #2c3e50;
			font-weight: 600;
		}

		.campus-btn {
			display: block;
			width: 200px;
			height: 50px;
			margin: 20px auto;
			font-size: 18px;
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-weight: 600;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.campus-btn:hover {
			background: linear-gradient(135deg, #764ba2, #667eea);
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		}

		.options {
			margin-top: 30px;
		}

		.option-btn {
			display: inline-block;
			width: 150px;
			height: 40px;
			margin: 10px;
			font-size: 16px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-weight: 600;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.option-btn:hover {
			background: linear-gradient(135deg, #7f8c8d, #95a5a6);
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		}

		.hidden {
			display: none;
		}
		
		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn {
			display: block;
			text-align: center;
			margin-top: 30px;
		}

		.back-btn a {
			display: inline-block;
			padding: 12px 25px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 8px;
			text-decoration: none;
			transition: all 0.3s ease;
			font-weight: 600;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
			text-decoration: none;
			color: white;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		function selectCampus(campus) {
			// 设置隐藏字段的值
			document.getElementById("selectedCampus").value = campus;
			// 显示选课方式选项
			document.getElementById("options").classList.remove("hidden");
			// 更新标题
			document.getElementById("title").innerHTML = "您选择了：" + campus + "，请选择选课方式";
		}

		function selectOption(option) {
			var campus = document.getElementById("selectedCampus").value;
			if (option === '自主选课') {
				window.location.href = "${pageContext.request.contextPath}/ElectCourse_Servlet?id=seekall&campus=" + campus;
			} else if (option === '推荐选课') {
				window.location.href = "${pageContext.request.contextPath}/jsp/course/s/RecommendCourse.jsp?campus=" + campus;
			}
		}
	</script>
</head>
<body>
<div class="container">
	<h2 id="title" class="title">请选择您的校区</h2>
	<input type="hidden" id="selectedCampus" value="">
	<div>
		<button class="campus-btn" onclick="selectCampus('校区1')">校区1</button>
		<button class="campus-btn" onclick="selectCampus('校区2')">校区2</button>
	</div>
	<div id="options" class="options hidden">
		<button class="option-btn" onclick="selectOption('自主选课')">自主选课</button>
		<button class="option-btn" onclick="selectOption('推荐选课')">系统推荐选课</button>
	</div>
	
	<div class="back-btn">
		<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
	</div>
</div>
</body>
</html>